<template>
  <li class="commentItem">
    klsdjlkfjsljkdfkljfjk
    <img :src="imgUrl" />
    <div class="comment">
      <p>
        <span>{{ userName }}:</span> {{ content }}
      </p>
      <p class="reply" v-show="replyCom.content != null">
        <span>@{{ replyCom.user.nickname }}:</span> {{ replyCom.content }}
      </p>
    </div>
    <span class="action" @click="likeComent()">
      <i
        :class="`iconfont ${
          t == 0 ? 'icon-dianzan_kuai active' : 'icon-dianzan'
        }`"
      ></i
      >{{ likeCount - t + 1 }}
    </span>
    <span class="time">{{ createTime(time) }}</span>
  </li>
</template>

<script>
// 引入moment时间库
import moment from "moment";
// 引入点赞接口
import { likeCommentAPI } from "@/api";
export default {
  name: "CommentItem",
  data() {
    return {
      t: 1,
    };
  },
  props: [
    "imgUrl",
    "id",
    "userName",
    "content",
    "time",
    "commentId",
    "likeCount",
    "type",
    "reply",
  ],
  methods: {
    //获取评论时间
    createTime(time) {
      const timer = moment(time);
      let nowTime = new Date().getTime();
      if (nowTime - time > 31536000000) {
        return timer.format("YYYY年MM月DD日 HH:mm");
      } else {
        return timer.format("MM月DD日 HH:mm");
      }
    },
    // 评论点赞
    async likeComent() {
      const res = await likeCommentAPI({
        id: this.id,
        cid: this.commentId,
        t: this.t,
        type: this.type,
      });
      if (res.data.code == 200) {
        this.t = this.t == 0 ? 1 : 0;
      } else {
        alert("网络错误");
      }
    },
  },
  computed: {
    // 防止没有数据报错
    replyCom() {
      if (this.reply && this.reply[0] != undefined && this.reply[0] != null) {
        return this.reply[0];
      } else {
        let reply = { content: null, user: { nickname: "" } };
        return reply;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.commentItem {
  width: 100%;
  position: relative;
  display: flex;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(190, 190, 190, 0.3);
  img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-top: 10px;
  }
  p {
    display: block;
    margin: 0;
    width: 500px;
    font-size: 13px;
    margin-top: 8px;
    margin-left: 14px;
    color: #444;
    word-break: break-all;
    span {
      color: rgb(84, 128, 177);
    }
  }
  .reply {
    width: 484px;
    background-color: rgb(241, 241, 241);
    border-radius: 5px;
    padding: 8px 8px;
  }
  .action {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 13px;
    cursor: pointer;
    color: #777;
    i {
      font-size: 13px;
    }
    i.active {
      color: #ff7a9e;
    }
  }
  .action:hover {
    color: black;
  }
  .time {
    font-size: 12px;
    color: #999;
    position: absolute;
    bottom: 10px;
    left: 50px;
  }
}
</style>